<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>什么是vue</title>
</head>
<body>
    <!-- 普通代码实现 -->
    <h1>
        原始实现
    </h1>
    <p class="title">
        从0开始学习vue
    </p>
    <button class="btn">点我改变</button>

    <script>
        let dom = document.getElementsByClassName('title')[0]; // 获取修改的目标dom
        let btn = document.getElementsByClassName('btn')[0]; // 获取按钮dom
        btn.addEventListener('click', () => { // 监听点击事件
            dom.innerText = '我不学，哎，我就是玩！' // 进行修改操作
        })
    </script>

    <!-- vue实现 -->
    <div id="app">
        <h1>
            vue实现
        </h1>
        <p>
            {{ title }}
        </p>
        <button @click="change">点我改变</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                title: '从0开始学习vue'
            },
            methods: {
                change() {
                    this.title = '我不学，哎，我就是玩！'
                }
            }
        })
    </script>
</body>
</html>